import React from "react"
import GpContainer from "@/components/GpContainer"
import { Image, Navigator, Text, View } from "@tarojs/components"
import GpBlockTitle from "@/components/GpBlockTitle"
import GpSchoolItem from "@/components/GpSchoolItem"
import GpContactTip from "@/components/GpContactTip"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import Taro from "@tarojs/taro"
import { getProDetail } from "@/apis/index"
import { pageMapper } from "@/constants/pageMap"
import { commonUrls, makePagePath } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import styles from "./index.module.scss"

const ports = [{ text: "专业简介" }]
type IDetail = {
  id: number
  name: string
  level: string
  code: string
  cateName: string
  subCateName: string
  introduce: string
  courseSystem: string
  developmentProspect: string
  projectId: number
}
type IState = {
  detail: IDetail | null
  schools: IApiRelative.IGetProDetail.ISchool[]
}
/** 专业简介 */
type IData = {
  id: string
}
class ProIntro extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      detail: null,
      schools: []
    }
    this.extData = {
      id: ""
    }
  }
  onShareAppMessage() {}
  onLoad(options: Recordable) {
    this.extData.id = options.id
    this.getDetailData()
  }
  componentDidShow() {
    this.setPageInfo(this.state.detail)
  }
  setPageInfo = (detail: INullable<IDetail>) => {
    if (detail) {
      setPageMeta({
        keywords: `${detail.name}专业解读，${detail.name}就业前景`,
        title: `${detail.level}${detail.name}介绍-就业前景怎么样-择艺宝`,
        description: `${detail.level}${detail.name}介绍，就业前景怎么样，有哪些院校开设这类专业，择艺宝为你一一解读。`
      })
    }
  }
  getDetailData = () => {
    Taro.showLoading()
    getProDetail(this.extData.id)
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const detail = {
            id: retData.id,
            name: retData.name,
            level: retData.level,
            code: retData.code,
            cateName: retData.cateName,
            subCateName: retData.subCateName,
            introduce: retData.introduce,
            courseSystem: retData.courseSystem,
            developmentProspect: retData.developmentProspect,
            projectId: retData.projectId
          }
          this.setState({
            schools: retData.schools,
            detail
          })
          this.setPageInfo(detail)
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  /** 美声艺术 */
  renderDesc = () => {
    const detail = this.state.detail as IDetail
    return (
      <View className="px-30px pt-60px bg-hex-fff">
        <View className="yahei-bold font-bold text-40px text-hex-2c2c35 mb-34px">
          <Text>{detail.name}</Text>
        </View>
        <View className=" rounded-16px bg-hex-fafafa h-296px box-border flex flex-row flex-wrap">
          <View className="flex flex-row items-center w-1_2 pl-44px box-border">
            <Image src="/images/proSpecificExplain/xlcc.jpg" className="w-56px h-56px" />
            <View className="ml-24px">
              <View className="yahei-bold font-bold text-28px text-hex-2c2c35 mb-14px">
                <Text>{detail.level}</Text>
              </View>
              <View className="yahei font-normal text-28px text-hex-b8b8bf">
                <Text>学历层次</Text>
              </View>
            </View>
          </View>
          <View className="flex flex-row items-center w-1_2">
            <Image src="/images/proSpecificExplain/zydm.jpg" className="w-56px h-56px" />
            <View className="ml-24px">
              <View className="yahei-bold font-bold text-28px text-hex-2c2c35 mb-14px">
                <Text>{detail.code}</Text>
              </View>
              <View className="yahei font-normal text-28px text-hex-b8b8bf">
                <Text>专业代码</Text>
              </View>
            </View>
          </View>
          <View className="flex flex-row items-center w-1_2 pl-44px box-border">
            <Image src="/images/proSpecificExplain/ssml.jpg" className="w-56px h-56px" />
            <View className="ml-24px">
              <View className="yahei-bold font-bold text-28px text-hex-2c2c35 mb-14px">
                <Text>{detail.cateName}</Text>
              </View>
              <View className="yahei font-normal text-28px text-hex-b8b8bf">
                <Text>所属门类</Text>
              </View>
            </View>
          </View>
          <View className="flex flex-row items-center w-1_2">
            <Image src="/images/proSpecificExplain/zylb.jpg" className="w-56px h-56px" />
            <View className="ml-24px">
              <View className="yahei-bold font-bold text-28px text-hex-2c2c35 mb-14px">
                <Text>{detail.subCateName}</Text>
              </View>
              <View className="yahei font-normal text-28px text-hex-b8b8bf">
                <Text>专业类别</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
  /** 专业介绍 */
  renderIntro = () => {
    const detail = this.state.detail as IDetail
    return (
      <View className="pt-40px px-30px bg-hex-fff">
        <View className="pb-24px">
          <GpBlockTitle title="专业介绍" />
        </View>
        <Text className={styles["textContent"]} userSelect decode>
          {detail.introduce}
        </Text>
      </View>
    )
  }
  /** 课程体系 */
  renderCourseSym = () => {
    const detail = this.state.detail as IDetail
    return (
      <View className="pt-88px px-30px bg-hex-fff">
        <View className="pb-24px">
          <GpBlockTitle title="课程体系" />
        </View>
        {/* className={styles["textContent"]} */}
        <Text className={styles["textContent"]}>{detail.courseSystem}</Text>
      </View>
    )
  }
  /** 发展前景 */
  renderLightness = () => {
    const detail = this.state.detail as IDetail
    return (
      <View className="pt-88px px-30px bg-hex-fff">
        <View className="pb-24px">
          <GpBlockTitle title="发展前景" />
        </View>
        {/* className={styles["textContent"]} */}
        <Text className={styles["textContent"]}>{detail.developmentProspect}</Text>
      </View>
    )
  }
  /** 相关院校 */
  renderSchool = () => {
    const { schools } = this.state
    if (!schools || schools.length === 0) return null
    const navigatorLink = commonUrls.shoolQuery
    return (
      <View className="pt-88px bg-hex-fff px-30px">
        <View className="pb-40px">
          <GpBlockTitle title="相关院校" showArrow navigatorLink={navigatorLink} />
        </View>
        <View className="flex flex-col">
          {schools.map((l, index) => (
            <GpSchoolItem key={index} schoolItem={l} />
          ))}
        </View>
      </View>
    )
  }
  /** 专业解读 */
  renderProExplain = () => {
    const detail = this.state.detail as IDetail
    if (!detail.projectId) return null
    const url = makePagePath(pageMapper.proSpecificExplain, { id: detail.projectId })
    return (
      <View className="pt-116px bg-hex-fff px-30px pb-48px">
        <View className="pb-24px">
          <GpBlockTitle title="专业解读" />
        </View>
        <Navigator url={url} className={styles["viewJump"]} hoverClass="none">
          <Text>
            点击查看与{detail.name}专业相关解读{">>>"}
          </Text>
        </Navigator>
      </View>
    )
  }
  renderContactTip = () => {
    return (
      <View className="bg-hex-fff pb-40px px-30px">
        <GpContactTip showContactBtn={false} />
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    if (!this.state.detail) return null
    return (
      <GpContainer>
        <View>
          {/* 美声艺术 */}
          {this.renderDesc()}
          {/* 专业介绍 */}
          {this.renderIntro()}
          {/* 课程体系 */}
          {this.renderCourseSym()}
          {/* 发展前景 */}
          {this.renderLightness()}
          {/* 相关院校 */}
          {this.renderSchool()}
          {/* 专业解读 */}
          {this.renderProExplain()}
          {this.renderContactTip()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default ProIntro
